/**
 * Created by Administrator on 2017/3/25.
 */

window.onload = function () {
    //03-瀑布流
    waterFlowr('main', 'box');
    var timer = null;
    window.onresize = function () {
        //函数节流，就是降低调用次数
        timer = setTimeout(function () {
            waterFlowr('main', 'box');
        },200);
    };

    //监视屏幕的滚动，符合条件的是添加更多盒子的条件
    var timer2 = null;
    window.onscroll = function () {
        timer2 = setTimeout(function () {
            if (isWillLoad()) {//记得要加括号
                //创建装我们图片的json数组
                var imgArr = {
                    'img': [
                        {'incon': 'images/0.jpg'},
                        {'incon': 'images/1.jpg'},
                        {'incon': 'images/2.jpg'},
                        {'incon': 'images/3.jpg'},
                        {'incon': 'images/4.jpg'},
                        {'incon': 'images/5.jpg'},
                        {'incon': 'images/6.jpg'},
                    ]
                };
                //遍历数组
                for (var i = 0; i < imgArr.img.length; i++) {
                    //创建新的box
                    var newBox = document.createElement('div');
                    newBox.className = 'box';
                    $('main').appendChild(newBox);
                    //创建新的pic盒子
                    var newPic = document.createElement('div');
                    newPic.className = 'pic';
                    newBox.appendChild(newPic);
                    //创建新的img
                    var newImg = document.createElement('img');
                    newImg.src = imgArr.img[i].incon;
                    newPic.appendChild(newImg);
                }
                //此时在要再次用瀑布流
                waterFlowr('main', 'box');
            }
        },200)
    }
};
//瀑布流布局的整体思想
function waterFlowr(parent, box) {
    //1 让父盒子居中显示
    var allBox = $(parent).getElementsByClassName(box);
    //1.1求出其中一个盒子的宽度,因为每个盒子等宽不等高
    var boxWith = allBox[0].offsetWidth;
    //求出当前屏幕的宽度
    var clientWith = document.documentElement.clientWidth;
    //求出每一行能放的盒子的个数(记得取整，得出的是小数)
    var cols = Math.floor(clientWith / boxWith);

    //r让父盒子居中显示
    $(parent).style.width = boxWith * cols + 'px';
    $(parent).style.margin = '0 auto';

    //2.让盒子进行定位显示
    //2.1定义也一个高度数组
    var heightArray = [];
    //2.2遍历所有的盒子
    for(var i =0;i<allBox.length;i++){
        //取出所有盒子的高度
        var boxHeight = allBox[i].offsetHeight;
        //判断是否是第一行，因为第一行不需要定位，不是第一行就找最矮的盒子放第二行的第一张图片
        if(i<cols){
            heightArray.push(boxHeight);//取出第一行的高度放在盒子高度数组中
            allBox[i].style.position = null;//当跟随屏幕滚动的时候，返回的时候第一行会变成第二行，会有定位值，所以要清空给他加的定位

        }else{
            //取出最小的盒子Math.min.apply意思是取出套在数组里面的另一个数组里面的最小值
            var minBoxHeight =Math.min.apply(this,heightArray);
            //获取最矮盒子对应的索引值
            var minBoxHeightIndex = getMinBoxHegiht(minBoxHeight,heightArray);
            //定位其他的盒子
            allBox[i].style.position = 'absolute';
            allBox[i].style.left = minBoxHeightIndex*boxWith+'px';
            allBox[i].style.top = minBoxHeight+'px';
            //更新其他盒子的位置
            heightArray[minBoxHeightIndex]+=boxHeight;
        }

    }
}
 //求出最矮盒子在高度数组的位置
function getMinBoxHegiht(value,arr){
    for(var i=0;i<arr.length;i++){
        if(arr[i]==value){
            return i;
        }
    }
}
//动态加载数据
function isWillLoad() {
    //取出所有的box
    var allBox = $('main').getElementsByClassName('box');
    //取出最后一个盒子
    var lastBox = allBox[allBox.length-1];
    //求出最后一个盒子高度的一半+最后一个盒子距离顶部的距离
    var lastBoxH =lastBox.offsetHeight*0.5+lastBox.offsetTop;
    //求出当前可视屏幕的高度
    var clientH = document.body.clientHeight||document.documentElement.clientHeight;
    //求出当前滚动后区域区里顶部的偏移距离
    var myScrollTop = document.body.scrollTop||document.documentElement.scrollTop;
    //判断当myScrollTop+clienH>=lastBoxH的时候就动态加载数据
    return (myScrollTop+clientH)>=lastBoxH;

}

/**
 * 思路：
 * 先布局瀑布流的布局，让所有已有盒子通过瀑布流布局好，然后通过node.js让用户让下拉的时候动态获取后台的数据动态
 * 因为这里没有学到，所以先用假数据，即使通过createElement和 append动态添加数据
 *
 *==============================创建瀑布流布局=======================================
 * 第一步先把所有盒子居中定位，因为父盒子没有宽度，所以要第一步主要是求出每行可以放多少个盒子，然后通过每个小盒子算出父元素的宽度，然后就可以居中了
 * 1.因为瀑布流中每个子盒子等宽不等高，所以通过$(parent).getElementsByClassName(box)拿到所有盒子再用其中的一个allbox[0]求出offsetWidth,即
 * boxWidth = allbox[0].offsetWidth
 * 2.算出当前屏幕的clientWith
 * 3.求出每行可以显示的盒子个数cols =Math.floor( clientWidth/boxWidth)注意是要通过Math.floor向下取整的方法，因为除出来的不一定是整数
 * 4.求出父盒子的宽度 = cols*boxWidth
 * 5.然后给父盒子定位
 * $(parent).style.width = boxWidth * clos + 'px';
 * $(parent).style.margin = '0 auto';
 *
 *第二步就是让子盒子定位，主要是定位第二排的盒子，第一排的盒子已经固定在那里，所以不用固定了。第二排盒子定位的依据是先把第二排第一个box定位在第一排盒子最矮那个，那么就要求出第一排的最矮的那个box是哪个，它所在的索引值
 * 1.先定义一个存放高度的数组 heightArr = [];
 * 2.然后遍历所有的盒子，求出每个盒子的高度var boxHeight = allBox[i].offsetHeight;
 * 3.这时候判断盒子是否在第一行：i<cols,这时候就把第一行每个box的高度存放在高度数组中；return heightArr.push[boxHight]
 * 4.如果不是第一行的话；
 *   4.1先求出第一行的最矮的box的高度  minBoxHeight = Math.min.apple(this,heightArr)
 *    4.2在求出第一行最矮box的索引值，先建个找索引值得函数
 *function getMinIndex(value,arr){
 * for(var i=0；i<arr.length;i++){
 *      if(arr[i]==value){
 *      return i;
 *      }
 * }
 * }
 *  4.3传入参数求出第一行最矮box的索引值var minBoxHeightIndex =getMinIndex(minBoxHeight,heightArr)
 *  4.4定位其他盒子的位置
 *  allBox[i].style.position = 'absolute'
 *  allBox[i].style.left = minBoxHeightIndex*boxWidth +'px';
 *  allBox[i].style.top = minBoxHight + 'px';
 *  4.5更新最矮盒子的索引值，因为在上面的循环中，第一次找到了最矮的盒子，然后通过了盒子的索引值和最矮盒子的自身宽高就把第二排的第一张图片定位在那里，此时就用到了更新最矮的索引值，把第一次最矮的绑定第二排第一个放上去的图片合成新的一个box，此时循环的时候第一排第二个最矮的就变成更新后最矮的，在把第二排第二个图片在绑上去成为一个新的box，如此循环
 *  heightArr[minBoxHeightIndex] += boxHeight;
 *此时瀑布流完成
 *
 *
 * ==============================动态创建假数据=======================================
 *
 *第三步是动态添加更多数据，此时先要判断什么时候加载数据，可以使最后一个显示完，也可以是最后一个显示一半，还可以使hi最后一个刚显示，现选中判断加载条件；最后一个显示一半的时候加载，那么怎么才知道显示到了一半就要加载呢？首先，获取最后一个加载一半的盒子的当时自身的高度：lastBox.offsetHight*0.5，在获取这个盒子区可视区域的顶部的距离lastBox.offsetTop,这两个值加起来，这是要获取当时屏幕的可视区域的高度clientHeight,在加上滚动条滚动后的滚动了多少srcollTop,这两者相加后的高度如果大于前面盒子一半的高度加上距顶部的距离的总和，这时就滚动，把这个抽取出来作为一个函数（isWillLoad()），此时下一步就是在window。onload方法里面创建一个判断是否满足isWillLoad()的onscroll方法动态添加box
 * 1.创建一个判断什么时候加载动态盒子的函数isWillLoad()
 * 2先遍历已有的所有盒子，取出最后一个盒子，然后取出这个盒子的lastBox.offsetHight*0.5，在取出这个盒子距可视区域的高度lastBox.offsetTop ,计算总和lastBoxH = lastBox.offsetHight*0.5 +lastBox.offsetTop
 * 3.在取出当前可视屏幕的宽度clientHeight 和滚动条滚动的便宜距离srcollTop,计算总和
 * 4.返回 return clientHeight+srcollTop>=lastBox
 *5.在window.onload 方法里面创建一个鼠标滚动事件scroll
 * 6.判断当条件成立的时候，即if(isWillLoad())那么就在里面动态加载数据
 * 6.1先创建一个json数据存放动态加载时的一行的六个图片
 *      var imgArr = {
 *          'img':[
 *                  {'incon':'images/0.jpg'},
 *                  {'incon':'images/1.jpg'},
 *                  {'incon':'images/2.jpg'},
 *                  {'incon':'images/3.jpg'},
 *                  {'incon':'images/4.jpg'},
 *                  {'incon':'images/5.jpg'},
 *                  {'incon':'images/6.jpg'},
 *          ]
 *      }
 *  6.2 遍历上面创建的存放的图片的数组
 *  for(var i=0;i<imgArr.img.length;i++)
 *  6.3 在里面创建新的box,然后把它放在大盒子main的最后面
 *  var newBox =document.creatElement('div')
 *  newBox.classname = 'box';
 *  $('main').appleChild(newBox);
 *  6.4再在新创建的box里面在创建和前面一样存放图片的而盒子，再把它放在上面的box里面
 *  var newPic =document.creatElement('div')
 *  newPic.classname = 'img'
 *  newBox.appleChild(newPic);
 *  6.5再在上面的img的box中创建img便签，
 *var newImg =document.creatElement('img')
 *  newImg.src = imgArr.img[i].icon;
 *  newBox.appleChild(newImg);
 *7.此时动态加载数据已经完成，这时需要再次执行一次步骤二中的瀑布流
 *
 *
 *
 *
 *
 *
 *
 * */